<template>
  <view :class="col" :style="style"><slot></slot></view>
</template>

<script lang="ts" setup>
import { CSSProperties } from 'vue';
import { isNumber, isObject } from '@vueuse/core'
import { mutable } from '@/witUI/utils'

type ColSizeObject = {
  span?: number
  offset?: number
  pull?: number
  push?: number
}

type ColSize = number | ColSizeObject
interface colProps {
  /**
   * @description custom element tag
   */
  tag?: string,
  /**
   * @description number of column the grid spans
   */
  span?: number,
  /**
   * @description number of spacing on the left side of the grid
   */
  offset?: number,
  /**
   * @description number of columns that grid moves to the left
   */
  pull?: number,
  /**
   * @description number of columns that grid moves to the right
   */
  push?: number,
  /**
   * @description `<768px` Responsive columns or column props object
   */
  xs?: number| object,
  /**
   * @description `≥768px` Responsive columns or column props object
   */
  sm?: number| object,
  /**
   * @description `≥992px` Responsive columns or column props object
   */
  md?: number|object,
  /**
   * @description `≥1200px` Responsive columns or column props object
   */
  lg?: number| object,
  /**
   * @description `≥1920px` Responsive columns or column props object
   */
  xl?: number| object,
}

const props = withDefaults(defineProps<colProps>(), {
  tag: 'view',
  span: 24,
  offset: 0,
  pull: 0,
  push: 0,
  xs: () => mutable({} as const),
  sm: () => mutable({} as const),
  md: () => mutable({} as const),
  lg: () => mutable({} as const),
  xl: () => mutable({} as const),

});
const gutter: number = inject('gutter');
const ns: string = 'wit-col';

const style = computed(() => {
  const style: CSSProperties = {};
  if (gutter) {
    style.paddingLeft = style.paddingRight = `${gutter/2}rpx`;
  }
  return style
});

const col = computed(() => {
  let classes: string[] = [];
  const pos = ['span', 'offset', 'pull', 'push'] as const;
  pos.forEach((p) => {
    const size = props[p];
    if (isNumber(size)) {
      if (p === 'span') classes.push(`${ns}-${props[p]}`);
      else if (size > 0) classes.push(`${ns}-${p}-${props[p]}`);
    }
  });
  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
  sizes.forEach((size) => {
    if (isNumber(props[size])) {
      classes.push(`${ns}-${size}-${props[size]}`);
    } else if (isObject(props[size])) {
      Object.entries(props[size]).forEach(([p, sizeProp]) => {
        classes.push(p !== 'span' ? `${ns}-${size}-${p}-${sizeProp}` : `${ns}-${size}-${sizeProp}`);
      });
    }
    // if (gutter) classes.push('guttered');
  });
  console.log(classes)
  return classes;
});
</script>

<style lang="scss" scoped>
//$namespace: 'wit';
// Break-point
$sm: 768px !default;
$md: 992px !default;
$lg: 1200px !default;
$xl: 1920px !default;

$breakpoints: (
    'xs': '(max-width: #{$sm})',
    'sm': '(min-width: #{$sm})',
    'md': '(min-width: #{$md})',
    'lg': '(min-width: #{$lg})',
    'xl': '(min-width: #{$xl})',
) !default;

@function getSize($size) {
  @return 0.041666666666667 * $size * 100 * 1%;
}
[class*='#{$namespace}-col-'] {
  box-sizing: border-box;
}
.#{$namespace}-col-0 {
  /* #ifdef APP-NVUE */
  width: 0;
  height: 0;
  margin: 0;
  /* #endif */
  /* #ifndef APP-NVUE */
  display: none;
  /* #endif */
}

@for $i from 0 through 24 {
  .#{$namespace}-col-#{$i} {
    max-width: getSize($i);
    flex: 0 0 getSize($i);
  }

  .#{$namespace}-col-offset-#{$i} {
    margin-left: getSize($i);
  }

  .#{$namespace}-col-pull-#{$i} {
    position: relative;
    right: getSize($i);
  }

  .#{$namespace}-col-push-#{$i} {
    position: relative;
    left: getSize($i);
  }

  @each $size in ['xs', 'sm', 'md', 'lg', 'xl'] {
    @if map-has-key($breakpoints, $size) {
      @media only screen and #{unquote(map-get($breakpoints, $size))} {
        .#{$namespace}-col-#{$size}-#{$i} {
          @if $i != 0 {
            display: block;
          }
          max-width: getSize($i) !important;
          flex: 0 0 getSize($i) !important;
        }

        .#{$namespace}-col-#{$size}-offset-#{$i} {
          margin-left: getSize($i);
        }

        .#{$namespace}-col-#{$size}-pull-#{$i} {
          position: relative;
          right: getSize($i);
        }

        .#{$namespace}-col-#{$size}-push-#{$i} {
          position: relative;
          left: getSize($i);
        }
      }
    }
  }
}

</style>
